<template>
	<view class="content">
		<view class="imagebox" @click="gobaock">
			<image :src="proxy.serverimageUrl + 'back-black.png'" mode=""></image>
		</view>
		<scroll-view scroll-y="true" class="textareabox">
			<view class="title">
				{{articledata.title}}
			</view>
			<view class="num-date">
				<view class="num-date-text">
					阅读{{articledata.readingFrequency}}
				</view>
				<view class="num-date-text">
					{{articledata.releaseTime}}
				</view>
			</view>
			<view class="kong-line">

			</view>
			<view class="textarea-text" v-html="articledata.content">
				<!-- {{articledata.releaseTime}} -->
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		getCurrentInstance,
		ref
	} from 'vue'
	import {
		articleByAid
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	onLoad((o) => {
		getarticle(o.aid)
	})
	const articledata = ref({})
	const getarticle = (id) => {
		let params = {
			aid: id,
			type: 1
		}
		articleByAid(params).then(res => {
			if(res.code == 200){
				articledata.value = res.data
			}
		})
	}
	const gobaock = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		padding: 114rpx 40rpx 0;

		.imagebox {
			width: 100%;

			image {
				width: 18rpx;
				height: 34rpx;
			}
		}

		.textareabox {
			// margin-top: 80rpx;
			height: calc(100vh - 200rpx);
			box-sizing: border-box;
			padding-top: 20rpx;

			.title {
				margin-top: 40rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				color: #191919;
			}

			.num-date {
				margin-top: 59rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.num-date-text {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #AEAEAE;
				}
			}

			.kong-line {
				width: 100%;
				height: 2rpx;
				background: #F4F3F3;
				margin-top: 25rpx;

			}

			.textarea-text {
				margin-top: 68rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
</style>